<template>
  <div>
    {{ message }}

    <button @click="changeMessage('哈哈')">修改</button>
    <hr>
    {{ count }} --- {{ douCount }}
    <button @click="count++">+1</button>
    <!-- <button @click="douCount = douCount + 2">+1</button> -->

    <hr>
    <h1>{{ obj.name }} ---- {{ obj.age }}</h1>
    <button @click="obj.age++">++</button>
  </div>
</template>



<script setup>
import { ref, computed, watch } from 'vue'
const message = ref('hellow Vue3');
const changeMessage = (value) => {
  message.value = value
}



const count = ref(10);
const douCount = computed({
  get() {
    return count.value * 2
  },
  set() {

  }
})


const obj = ref({
  name: '张三',
  age: 18
})
watch(obj.value, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})


</script>



<!-- 
选项式 api
<script>
export default {
  name: 'home-view',
  data() {
    return {
      message: 'hellow Vue3',
      count: 10,
      obj: {
        name: '张三',
        age: 18
      }
    }
  },
  methods: {
    changeMessage(value) {
      this.message = value
    } 
  },
  computed: {
    douCount: {
      get() {
        return this.count * 2
      },
      set(value) {
        this.count = value / 2
      }
    }
  },
  watch: {
    count: {
      handler(newValue, oldValue) {
        console.log(`属性count 从旧值${oldValue} => 新值${newValue}`)
      },
      immediate: true,

    },
    obj: {
      handler(newValue, oldValue) {
        console.log(`属性obj 从旧值${JSON.stringify(oldValue)} => 新值${JSON.stringify(newValue)}`)
      },
      deep: true
    }
  }, 
  // 生命周期
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {},
  unmounted() {},
  

  //
  errorCaptured() {},
  activated() {},
  deactivated() {}
}
</script> -->